<template>
  <div>
    <vue-ueditor-wrap
      v-model="contents"
      :config="myConfig"
      @ready="ready"
      :destroy="destroy">
    </vue-ueditor-wrap>
    <!-- @beforeInit="addCustomButtom" -->
    <el-dialog
      title="上传图片"
      :visible.sync="dialogVisible"
      width="550px"
      :show-close="true"
      :close-on-click-modal="false"
      top="10%"
      class="my-dialog">
      <el-upload
        class="upload-demo"
        :action="serverUrl"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-success="handleSuccess"
        list-type="picture">
        <el-button size="small" type="primary" style="margin-left: 10px;">点击上传</el-button>
      </el-upload>
      <el-button size="small" type="success" @click="yes(editor)">确定上传</el-button>
    </el-dialog>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'

export default {
  components: {
    VueUeditorWrap
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 450
    },
    width: {
      type: String,
      default: '100%'
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    serverUrl: {
      type: String,
      required: true
    },
    destroy: { // 销毁
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editor: null,
      dialogVisible: false,
      contents: '',
      myConfig: {
        autoHeightEnabled: this.autoHeight,
        initialFrameHeight: this.height,
        initialFrameWidth: this.width,
        // serverUrl: `${process.env.UPLOAD_URL}/operate/uploadUeditor`
        serverUrl: `${process.env.UPLOAD_URL}/first/AliyunUpload/upload_editor`
      },
      fileList: []
    }
  },
  created() {
    this.contents = this.content
  },
  methods: {
    setContents(content) {
      this.contents = content
    },
    ready(editorInstance) {
      this.editor = editorInstance
    },
    yes(editor) {
      let url = ''
      this.fileList.forEach(element => {
        url += `<img src="${element.url}" alt="${element.name}"/>`
      })
      editor.execCommand('inserthtml', url)
      this.dialogVisible = false
    },
    handleRemove(file) {
      const pic_id = file.response ? file.response.data.pic_id : file.name
      const detail_pic = this.fileList
      this.fileList = []
      for (const item of detail_pic) {
        if (Number(item) !== Number(pic_id)) {
          this.fileList.push(item)
        }
      }
    },
    handleSuccess(res, file) {
      this.fileList.push({
        name: res.data.pic_id,
        url: res.data.pic_image
      })
    }
    /* addCustomDialog(editorId) {
      window.UE.registerUI('test-dialog', function(editor, uiName) {
        // 创建 dialog
        var dialog = new window.UE.ui.Dialog({
        // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
          iframeUrl: '/customizeDialogPage.html',
          // 需要指定当前的编辑器实例
          editor: editor,
          // 指定 dialog 的名字
          name: uiName,
          // dialog 的标题
          title: '这是一个自定义的 Dialog 浮层',
          // 指定 dialog 的外围样式
          cssRules: 'width:600px;height:300px;',
          // 如果给出了 buttons 就代表 dialog 有确定和取消
          buttons: [
            {
              className: 'edui-okbutton',
              label: '确定',
              onclick: function() {
                dialog.close(true)
              }
            },
            {
              className: 'edui-cancelbutton',
              label: '取消',
              onclick: function() {
                dialog.close(false)
              }
            }
          ]
        })
        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function() {
          var state = editor.queryCommandState(uiName)
          if (state === -1) {
            btn.setDisabled(true)
            btn.setChecked(false)
          } else {
            btn.setDisabled(false)
            btn.setChecked(state)
          }
        })
        return btn
      },
      56,
      editorId)
    } */
  }
}
</script>
